<template>
  <div class="count">
    <van-form @submit="onSubmit" required>
      <van-uploader v-model="formData.images" multiple :max-count="3" />

      <van-cell-group inset>
        <van-field
          v-model="formData.name"
          label="商品名称"
          placeholder="请输入商品名称"
          :rules="[{ required: true, message: '请填写商品名称' }]"
        />

        <van-field
          v-model="formData.price"
          label="购入价格"
          placeholder="请输入购入价格"
          :rules="[{ required: true, message: '请填写购入价格' }]"
        />

        <van-field
          v-model="formData.shipping"
          type="number"
          label="邮费"
          placeholder="请输入邮费"
        />

        <van-field
          v-model="formData.purchaseDate"
          label="购入时间"
          readonly
          is-link
          :rules="[{ required: true, message: '请选择购入时间' }]"
          @click="showPurchaseDatePicker = true"
        />
        <van-calendar
            v-model:show="showPurchaseDatePicker"
            @confirm="onConfirmPurchaseDate"
            :minDate="minDate"
          />
        <van-field 
          name="isInStock" 
          label="现货/空气谷"
          :rules="[{ required: true, message: '请选择商品类型' }]"
        >
          <template #input>
            <van-radio-group v-model="formData.isInStock" direction="horizontal">
              <van-radio :name="true">现货</van-radio>
              <van-radio :name="false">空气谷</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 如果是空气谷，则显示尾款金额和补款时间字段 -->
        <template v-if="!formData.isInStock">
          <van-field
            v-model="formData.finalPayment"
            type="number"
            label="尾款金额"
            placeholder="请输入尾款金额"
            :rules="[{ required: true, message: '请填写尾款金额' }]"
          />
          <van-field
            v-model="formData.finalPaymentDate"
            label="补款时间"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择补款时间' }]"
            @click="showFinalPaymentDatePicker = true"
          />
         <van-popup v-model:show="showFinalPaymentDatePicker" position="bottom">
          <van-date-picker
            v-model="finalPaymentDate"
            title="选择补款时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmFinalPaymentDate"
            @cancel="showFinalPaymentDatePicker = false"
          />
        </van-popup>
        </template>
         
        <van-field
          v-model="formData.soldDate"
          label="售出时间"
          readonly
          is-link
          @click="showSoldDatePicker = true"
        />
        <van-calendar
          v-model:show="showSoldDatePicker"
          @confirm="onConfirmSoldDate"
          :minDate="minDate"
        />
        <van-field
          v-model="formData.soldPrice"
          type="number"
          label="售出价格"
          placeholder="请输入售出价格"
        />

        <van-field
          v-model="formData.ip"
          label="IP"
          readonly
          is-link
          placeholder="请选择IP"
          @click="showIPPicker = true"
        />
        <van-popup v-model:show="showIPPicker" position="bottom">
          <van-picker
            :columns="ipColumns"
            @confirm="onConfirmIP"
            @cancel="showIPPicker = false"
          />
        </van-popup>

        <van-field
          v-model="formData.series"
          label="系列"
          readonly
          is-link
          placeholder="请选择系列"
          @click="showSeriesPicker = true"
        />
        <van-popup v-model:show="showSeriesPicker" position="bottom">
          <van-picker
            :columns="seriesColumns"
            @confirm="onConfirmSeries"
            @cancel="showSeriesPicker = false"
          />
        </van-popup>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { http } from '@/utils/request'
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 11, 31)

const finalPaymentDate = ref(new Date())
const ipColumns = ref([])

const onConfirmFinalPaymentDate = (value) => {
  formData.value.finalPaymentDate = formatDate(value)
  showFinalPaymentDatePicker.value = false
}
const showPurchaseDatePicker = ref(false)
const showSoldDatePicker = ref(false)
const showIPPicker = ref(false)
const showSeriesPicker = ref(false)
const showFinalPaymentDatePicker = ref(false)

// 在 formData 中添加相关字段
const formData = ref({
  images: [],
  name: '',
  price: '',
  shipping: '',
  purchaseDate: '',
  isInStock: true,
  finalPayment: '',
  finalPaymentDate: '',  // 新增补款时间字段
  soldDate: '',
  soldPrice: '',
  ip: '',
  series: ''
})

const onConfirmPurchaseDate = (value) => {
  formData.value.purchaseDate = formatDate(value)
  showPurchaseDatePicker.value = false
}

const onConfirmSoldDate = (value) => {
  formData.value.soldDate = formatDate(value)
  showSoldDatePicker.value = false
}
const formatDate = (date) => {
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const onConfirmIP = ({ selectedValues }) => {
  formData.value.ip = selectedValues[0]
  showIPPicker.value = false
}

const onSubmit = (values) => {
  console.log('form submit', formData.value)
}

const getIps = async () => {
  const list = await http.get('/category/getFirstLevelCategory') || []
  ipColumns.value = list.map(v => {
    return {
      ...v, 
      text: v.name,
      value: v.id
    }
  })
}

onMounted(() => {
  getIps()
})
</script>

<style scoped>
.count {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}
</style>